<template>
	<view class="content">
		<view class="swiper">
			<uni-swiper-dot class="uni-swiper-dot-box" :info="info" :current="current" :mode="mode" field="content">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view class="swiper-item">
							<image :src='item.url' mode=""></image>
							<image src="" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<view class="goods_name">
			<text>XXXXXXXXXXXXXXXXXXXXXXX</text>
		</view>
		<view class="goods_price">
			<view class="price_left">
				<text>价格：</text>
			</view>
			<view class="price_right">
				￥<text>9.9</text>
			</view>
		</view>
		<view class="goods_type">
			<view class="goods_typeone" @click="sx()">
				<text>购买类型</text>
				<image style="width: 18rpx; height: 28rpx;" src="../../../static/my/go.png" mode=""></image>
			</view>
		</view>

		<view class="goods_assess">
			<view class="goods_assess_left">
				评价（0）
			</view>
			<view class="goods_assess_right">
				<text>好评率100%</text>
				<image style="width: 18rpx; height: 28rpx;" src="../../../static/my/go.png" mode=""></image>
			</view>
		</view>

		<view class="bottom">
			<view class="bottom_left">
				<view class="bottom_like" @click="dianpu">
					<image style="width: 48rpx; height: 48rpx;" src="../../../static/home/dp.png" mode=""></image>
					<text>店铺</text>
				</view>
				<view class="bottom_like">
					<image style="width: 48rpx; height: 48rpx;" src="../../../static/home/xh.png" mode=""></image>
					<text>收藏</text>
				</view>
				<view class="bottom_like">
					<image style="width: 48rpx; height: 48rpx;" src="../../../static/home/zf.png" mode=""></image>
					<text>转发</text>
				</view>
			</view>
			<view class="bottom_right">
				<button type="default" @click="tosubmit()">立即购买</button>
			</view>
		</view>


		<view class="bg" v-show="aa">
			<view class="bg1">

			</view>
			<view class="shoptype_boot">

				<!--  商品-->
				<view class="goods_list">
					<view class="goods_list_left">
						<image src="../../../static/my/goodsimg.png" mode=""></image>
					</view>
					<view class="goods_list_right">
						<view class="goods_list_right_top">
							<text>XXXXXXXXXX</text>
						</view>
						<view class="goods_list_right_bottom">
							￥<text>9.9</text>
						</view>
					</view>
				</view>

				<view class="type_title">
					规格1：
				</view>
				<view class="list">
					<view class="typelist" v-for="(item,index) in typelist" @click="typeChange(item.id)"
						:style="{border:b==item.id?'2px solid #409CFD':''}">
						{{item.title}}
					</view>
				</view>

				<view class="type_bo">
					<view class="type_zj">
						总计：￥<text>121</text>
					</view>
					<view class="type_wc">
						<button type="default" @click="wc()">完成</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	var _that
	import helper from '@/common/helper.js';
	export default {
		components: {},
		data() {
			return {
				aa:false,
				a: 0,
				b: 0,
				typelist: [{
						id: 0,
						title: '口算'
					},
					{
						id: 1,
						title: '口算'
					},
					{
						id: 2,
						title: '口算'
					},
					{
						id: 3,
						title: '口算'
					},
					{
						id: 4,
						title: '口算'
					}
				],
				info: [{
						url: '../../../static/home/Slice 140@2x.png',
					},
					{
						url: '../../../static/home/Slice 140@2x.png',
					},
					{
						url: '../../../static/home/Slice 140@2x.png',
					}
				],
				current: 0,
				mode: 'default',
				swiperDotIndex: 0,
				id:""
			}
		},
		onLoad(option) {
			_that = this
			_that.id = option.id
			_that.xq_xq();
		},
		methods: {
			xq_xq(){
				uni.request({
					url: helper.web + '/api/index/getIndexGoods',
					method: 'GET',
					header:{
						token:uni.getStorageSync("token")
					},
					data:{
						id:_that.id
					},
					success: resa => {
						console.log('用户管理-商品详情页', resa);
						// _that.goodslist = resa.data.data[0]
					}
				});
			},
			dianpu(){
				uni.navigateTo({
					url: '/pages/index/my/myshop/shop'
				});
			},
			change(e) {
				this.current = e.detail.current
			},
			typeChange(id) {
				console.log(id)
				this.b = id
			},
			sx(){
				this.aa = !this.a
				console.log(this.aa)
			},
			wc(){
				this.aa == false
				console.log(this.aa)
			},
			tosubmit(){
				uni.navigateTo({
					url:'/pages/index/home/submit_details'
				})
			}
		},
	
	}
</script>
<style lang="scss">
	.content {
		width: 750rpx;
		height: 100vh;
		background: #FAFAFA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.swiper {
		width: 750rpx;
		height: 560rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.swiper-box {
		width: 750rpx;
		height: 560rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.swiper-item image {
		width: 750rpx;
		height: 560rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.goods_name {
		background-color: #FFFFFF;
		padding-top: 28rpx;
		padding-left: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		
	}

	.price_left {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.goods_price {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		padding-top: 26rpx;
		background-color: #FFFFFF;
	}

	.price_right {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #1D8CFF;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.price_right text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #1D8CFF;
	}

	.goods_typeone {

		height: 100rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #999999;
		margin-left: 30rpx;
		margin-right: 24rpx;
	}

	.goods_type {
		background-color: #FFFFFF;
	}

	.goods_type text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.goods_type image {
		margin-left: auto;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		align-items: center;
		display: flex;

	}

	.bottom_left {
		display: flex;
		align-items: center;
	}

	.bottom_like {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0 28rpx 0 28rpx;
	}

	.bottom_like image {
		margin: auto;
	}

	.bottom_like text {
		margin: 10rpx auto 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		line-height: 33rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.bottom_right {
		display: flex;
		margin-left: auto;
		padding-right: 30rpx;
	}

	.bottom_right button {
		width: 240rpx;
		height: 80rpx;
		background: #1D8CFF;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		font-family: PingFang SC, PingFang SC;
		// font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.goods_assess {
		display: flex;
		padding-left: 30rpx;
		padding-right: 24rpx;
		margin-top: 32rpx;
	}

	.goods_assess_left {

		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #666666;
		line-height: 38rpx;

	}

	.goods_assess_right {
		display: flex;
		align-items: center;
		margin-left: auto;
	}

	.goods_assess_right text {
		margin-right: 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #666666;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.bg {}

	.bg1 {
		background-color: #000000;
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		top: 0;
		opacity: 0.23;
	}

	.shoptype_tc {}

	.shoptype_boot {
		width: 750rpx;
		height: 1000rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		position: absolute;
		z-index: 999;
		bottom: 0;
	}



	.goods_list {
		width: 690rpx;
		height: 224rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;

	}

	.goods_list_left {
		margin-left: 32rpx;
	}

	.goods_list_left image {
		width: 160rpx;
		height: 160rpx;
	}

	.goods_list_right {
		margin-left: 16rpx;
	}

	.goods_list_right_top {
		width: 468rpx;
		height: 80rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.goods_list_right_bottom {
		height: 80rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #409CFD;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		display: table-cell;
		vertical-align: bottom;
		padding-bottom: 10rpx;
	}

	.goods_list_right_bottom text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #409CFD;
		line-height: 33rpx;


	}

	.type_title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		margin-left: 30rpx;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
	}

	.typelist {
		width: 176rpx;
		height: 68rpx;
		background: #EEEEEE;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		margin: 24rpx 24rpx 24rpx 24rpx;

	}

	.type_bo {
		height: 170rpx;
		position: absolute;
		bottom: 0;
	}

	.type_zj {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #007AFF;
		margin-left: 30rpx;
		margin-bottom: 16rpx;
	}

	.type_zj text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #007AFF;
	}

	.type_wc {

		margin-left: 30rpx;
	}

	.type_wc button {
		width: 690rpx;
		height: 88rpx;
		background: #409CFD;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;

	}
</style>